<template>
  <div id="password">
    <div class="content">
      <el-form :model="info" :rules="rules" ref="info" label-width="120px">
        <el-form-item label="输入旧密码：" prop="old">
          <el-row>
            <el-col :span="8">
              <el-input v-model="info.old" type="password" placeholder="请输入旧密码"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="输入新密码：" prop="new">
          <el-row>
            <el-col :span="8">
              <el-input v-model="info.new" type="password" placeholder="请输入6-12位新密码"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="确认新密码：" prop="again">
          <el-row>
            <el-col :span="8">
              <el-input v-model="info.again" type="password" placeholder="请再次输入新密码确认"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <el-row class="footer-fixed">
        <el-col :span="24" class="text-right">
          <el-button type="primary" plain>取 消</el-button>
          <el-button type="primary" @click="submitInfo('info')">保 存</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: "password",
  data() {
    return {
      info: {
        old: "",
        new: "",
        again: ""
      },
      rules: {
        old: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
        new: [
          { required: true, message: "请输入6-12位新密码", trigger: "blur" }
        ],
        again: [
          { required: true, message: "请再次输入新密码确认", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    submitInfo(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("验证通过！");
        } else {
          return false;
        }
      });
    }
  }
};
</script>


<style scoped>
.content {
  height: calc(100vh - 144px);
  background: #ffffff;
  position: relative;
  padding: 20px;
  font-size: 14px;
}
</style>